<template>
	<view class="commentsItem_styles">
		<!-- 头像 -->
		<image :src="item.icon" mode="" class="commentsItem_icon"></image>
		<!-- 正文 -->
		<view class="commentsItem_main">
			<view class="commentsItem_main_name">{{item.name}}</view>
			<view class="commentsItem_main_comments" v-if="!item.isReply">{{item.comments}}</view>
			<view class="commentsItem_main_replay" v-if="item.isReply">
				<view class="commentsItem_main_replay_content"><text style="font-weight: 500;">回复了你:</text> {{item.reply}}</view>
				<view class="commentsItem_main_replay_original">
				{{item.comments}}</view>
			</view>
			<view class="commentsItem_main_date">{{item.date}}</view>
		</view>
		<!-- image或者文章 -->
		<image :src="item.image" mode="" class="commentsItem_image" v-if="item.image"></image>
		<view class="commentsItem_imageText"v-if="item.imagetext">{{item.imagetext}}</view>
		
	</view>
</template>

<script>
	export default {
		name: "CommentsItem",
		props: ["item"],
		data() {
			return {

			};
		}
	}
</script>

<style>
	.commentsItem_styles {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		display: flex;
	}

	.commentsItem_icon {
		width: 100rpx;
		min-width: 100rpx;
		height: 100rpx;
		border-radius: 50% 50%;
	}

	.commentsItem_image {
		width: 160rpx;
		min-width: 160rpx;
		height: 160rpx;
	}
	
	.commentsItem_imageText {
		width: 160rpx;
		min-width: 160rpx;
		height: 160rpx;
		font-size: 14px;
		color: #8f9199;
		white-space: pre-wrap;
		display: -webkit-box;
		-webkit-line-clamp: 4; //此处为上限行数
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.commentsItem_main {
		width: 100%;
		box-sizing: border-box;
		padding: 0 15rpx;
	}
	
	.commentsItem_main_name {
		width: 100%;
		font-size: 16px;
		font-weight: 600;
	}
	
	.commentsItem_main_comments {
		margin-top: 10rpx;
		font-size: 14px;
		white-space: pre-wrap;
		display: -webkit-box;
		-webkit-line-clamp: 3; //此处为上限行数
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.commentsItem_main_date {
		margin-top: 20rpx;
		font-size: 12px;
		color: #8f9199;
	}
	
	.commentsItem_main_replay_content {
		margin-top: 10rpx;
		font-size: 14px;
		white-space: nowrap;
		display: -webkit-box;
		-webkit-line-clamp: 1; //此处为上限行数
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.commentsItem_main_replay_original {
		margin-top: 20rpx;
		line-height: 40rpx;
		font-size: 14px;
		color: #8f9199;
		display: flex;
	}
	.commentsItem_main_replay_original::before {
		content: " ";
		display: inline-block;
		width: 20rpx;
		height: 40rpx;
		background-color: #F99333;
		margin-right: 20rpx;
	}
</style>
